<template>
  <div>
    <el-table :data="state.tableData" border style="width: 100%">
      <el-table-column prop="idName" label="用户名称" />
      <el-table-column label="角色名称">
        <template #default="scope">
          {{ AttestationInfo[scope.row.roleType as keyof typeof AttestationInfo] }}
        </template>
      </el-table-column>
      <el-table-column label="审核状态">
        <template #default="scope">
          {{ AuditStatusText[scope.row.auditStatus as keyof typeof AuditStatusText].text }}
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="审核意见" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="handelAudit(scope.row, false)">查看</el-button>
          <el-button v-if="scope.row.auditStatus != AuditStatus.COMPLETED"
            @click="handelAudit(scope.row, true)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="state.total" :limit="state.pageSize" :page-change="PageChange" />
    <AuditDialog ref="dialogRef" :id="state.currentId" :type="state.isType" @submitChange="submitChange" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import Pagination from "@/components/pagination/index.vue";
import { postIdentityList } from "@/api/base";
import { AttestationInfo } from "./config/index";
import { AuditStatusText } from "@/views/competition/config/index";
import { AuditStatus } from "@/views/competition/config/enum";
import AuditDialog from "./Component/auditDialog.vue";

const state = reactive({
  tableData: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
  currentId: "",
  isType: false,// true: 审核 ， false：查看
});
const dialogRef = ref();

// 审核
const handelAudit = (params: any, type: boolean) => {
  state.currentId = params.wxUserRoleId;
  state.isType = type;
  dialogRef.value.dialogVisible = true;
};
// 审核 - dialog 审核回调
const submitChange = () => {
  getTableData();
};

// 查询数据
const getTableData = () => {
  postIdentityList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
  }).then((res) => {
    state.tableData = res.data.rows || [];
    state.total = res.data.total || 0;
  });
};
getTableData();
// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  getTableData();
};
</script>

<style lang="scss" scoped>
.el-form .el-form-item:last-of-type {
  margin-bottom: 18px !important;
}
</style>
